<template>
  <div class="shenheshezhi">
    <div class="common-layout">
      <el-tabs type="border-card" class="table_1">
        <!-- 左边 -->
        <el-tab-pane label="审核设置">
          <!-- 表格内容 -->
          <div class="middle">
            <div class="middle_left">
              <el-form>
                年级：
                <!-- 下拉选择 -->
                <el-select
                  v-model="value"
                  class="inp"
                  placeholder="请选择"
                  size="small"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form>
            </div>
            <div class="middle_right">
              <el-button type="warning" disabled size="small"
                >不需要审核</el-button
              >
              <el-button type="primary" disabled size="small"
                >需要审核</el-button
              >
              <el-button type="success" disabled size="small"
                >仅班主任可以审核</el-button
              >
            </div>
          </div>
          <div class="main">
            <!-- 表格 -->
            <el-table
              :cell-style="{ textAlign: 'center' }"
              :header-cell-style="{ 'text-align': 'center' }"
              ref="multipleTableRef"
              :data="tableData1"
              style="width: 100%"
              @selection-change="handleSelectionChange"
              stripe
              border
              size="small"
            >
              <el-table-column type="selection" width="55" />
              <el-table-column label="序号" width="120">
                <template #default="scope">{{ scope.row.id }}</template>
              </el-table-column>
              <el-table-column property="name" label="班级" width="120" />
              <el-table-column
                property="address"
                label="家长发布是否需要审核"
                show-overflow-tooltip
              />
              <el-table-column
                property="order"
                label="家长发布是否仅班主任可以审核"
                show-overflow-tooltip
              />
            </el-table>
          </div>
        </el-tab-pane>
        <!-- 右边 -->
        <el-tab-pane label="删除设置">
          <!-- 表格内容 -->
          <div class="middle">
            <div class="middle_left">
              <el-form>
                年级：
                <!-- 下拉选择 -->
                <el-select
                  v-model="value"
                  class="inp"
                  placeholder="请选择"
                  size="small"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form>
            </div>
            <div class="middle_right">
              <el-button type="primary" disabled size="small"
                >老师可删除</el-button
              >
              <el-button type="success" disabled size="small"
                >仅班主任可删除</el-button
              >
            </div>
          </div>
          <div class="main">
            <!-- 表格 -->
            <el-table
              :cell-style="{ textAlign: 'center' }"
              :header-cell-style="{ 'text-align': 'center' }"
              ref="multipleTableRef"
              :data="tableData2"
              style="width: 100%"
              @selection-change="handleSelectionChange"
              stripe
              border
              size="small"
            >
              <el-table-column type="selection" width="55" />
              <el-table-column label="序号" width="120">
                <template #default="scope">{{ scope.row.id }}</template>
              </el-table-column>
              <el-table-column property="name" label="班级" width="120" />
              <el-table-column
                property="address"
                label="家长发布是否需要审核"
                show-overflow-tooltip
              />
            </el-table>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { ElTable } from "element-plus";
const value = ref("");
const options = [
  {
    value: "Option1",
    label: "一年级",
  },
  {
    value: "Option2",
    label: "二年级",
  },
];
interface User {
  date: string;
  name: string;
  address: string;
}
const multipleTableRef = ref<InstanceType<typeof ElTable>>();
const multipleSelection = ref<User[]>([]);
const toggleSelection = (rows?: User[]) => {
  if (rows) {
    rows.forEach((row) => {
      // TODO: improvement typing when refactor table
      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
      // @ts-expect-error
      multipleTableRef.value!.toggleRowSelection(row, undefined);
    });
  } else {
    multipleTableRef.value!.clearSelection();
  }
};
const handleSelectionChange = (val: User[]) => {
  multipleSelection.value = val;
};

const tableData1: User[] = [
  {
    id: "1",
    name: "一年级一班",
    address: "老师可删除 ",
    order: "所有老师可审核",
  },
  {
    id: "2",
    name: "一年级一班",
    address: "老师可删除 ",
    order: "仅班主任可审核",
  },
  {
    id: "3",
    name: "一年级一班",
    address: "老师可删除 ",
    order: "仅班主任可审核",
  },
  {
    id: "4",
    name: "一年级一班",
    address: "老师可删除 ",
    order: "所有老师可审核",
  },
  {
    id: "5",
    name: "一年级一班",
    address: "仅班主任可删除 ",
    order: "仅班主任可审核",
  },
];
const tableData2: User[] = [
  {
    id: "1",
    name: "一年级一班",
    address: "老师可删除 ",
  },
  {
    id: "2",
    name: "一年级一班",
    address: "老师可删除 ",
  },
  {
    id: "3",
    name: "一年级一班",
    address: "老师可删除 ",
  },
  {
    id: "4",
    name: "一年级一班",
    address: "老师可删除 ",
  },
  {
    id: "5",
    name: "一年级一班",
    address: "仅班主任可删除 ",
  },
];
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
.shenheshezhi {
  height: 100%;
}
.common-layout {
  background: rgb(245, 247, 250);
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 10px;
}
.table_1 {
  height: 100%;
  border: none;
}
.middle {
  line-height: 50px;
  background: white;
  display: flex;
  justify-content: space-between;
  height: 60px;
  font-size: 14px;
  padding-top: 10px;
  padding-left: 30px;
  padding-right: 30px;
}
.main {
  flex: 1;
  background: white;
  padding-left: 40px;
  padding-right: 40px;
}
.inp {
  width: 120px;
}
</style>